<template>
  <div class="loginbox">
    <div class="login">
      <!-- <div>
        <img src="@/assets/login/login-bigimg.jpg" class="login-img" alt="" />
      </div> -->

      <div class="login-window" style="max-width: 460rem">
        <div>
          <div class="logText">欢迎登录</div>
        </div>
        <div>
          <div label="账户名">
            <input class="inps" placeholder="请输入管理员账户名" v-model="formLabelAlign.name" />
          </div>
          <div label="密码">
            <input class="inps" placeholder="请输入管理员密码" v-model="formLabelAlign.password" />
          </div>
        </div>

        <div>
          <button @click="onSubmit" class="btn">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>



  
  <script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UserLogin } from '@/utils/lxz-axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
  name: '',
  password: '',
  type: '',
})

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../../stores/Lxz.js'

// 获取pinia实例内容
const FilmDataStore = useCounterStore()

// 获取pinia数据使用这种方式
const { users } = storeToRefs(FilmDataStore)

// //引入pinia内的方法
const { setUsers } = FilmDataStore

const onSubmit = () => {
  UserLogin(formLabelAlign.name, formLabelAlign.password)
    .then((res) => {
      console.log('yes', res)
      if (res.data.logintype == 2 && res.data.usertype == 'admin') {
        ElMessage({
          message: `登录成功，欢迎您!管理员${res.data.usname}`,
          type: 'success',
        })

        localStorage.setItem('token', res.data.token)
        localStorage.setItem('users', res.data.usname)
        setUsers(res.data.usname)
        router.push('/')
      } else if (res.data.logintype == 2 && res.data.usertype != 'admin') {
        ElMessage({
          message: `登录失败！当前账户非管理员！`,
          type: 'warning',
        })
      } else {
        ElMessage.error(res.data.error)
      }
    })
    .catch((err) => {
      console.log('error', err)
    })
}
</script>
  
<style lang="less" scoped>
.loginbox {
  width: 100vw;
  height: 100vh;
  // background-color: bisque;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('/src/assets/login/loginbackbig.png') center center;
  // background-size: 100vw 100vh;
  // background-size: cover;
  // background-color: red;
  // background-size: contain; /* 保持宽高比，以最短边为基准 */
  background-size: cover;
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}
.login {
  border-radius: 25px;
  // position: fixed;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.878);
  display: flex;
  font-size: 0;

  box-shadow: 0px 0px 4px 0px rgba(94, 94, 94, 0.3);
  .login-img {
    height: 500rem;
  }

  .login-window {
    padding: 40rem 35rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column;

    // width: 25vw;
    // height: 35vw;

    width: 310rem;
    height: 315rem;

    // display: flex;
    // flex-flow: column;
    // justify-content: center;

    .logText {
      font-size: 20rem;
      font-weight: 700;
      color: #124362;
      // padding-bottom: 60rem;
      margin: 0 auto;
    }

    .inps {
      width: 200rem;
      height: 30rem;
      margin-bottom: 20rem;
      background-color: #e1ddd185;
      border-radius: 25px;
      border: none;
      padding: 0 20px;
      outline: none;
    }

    .btn {
      width: 230rem;
      height: 30rem;
      border-radius: 25px;
      border: none;
      background-color: #456777;
      color: white;
      font-size: 14rem;
    }
  }
}
</style>


